/**
 * ZGMapApi.js
 * Version: 1.0
 * Author: wyh,lmc
 * 该组件封装地图整体功能，供前端调用
 */
function loadScript(url) {
    var script = document.createElement('script')
    script.type = 'text/javascript';
    script.src = url
    document.body.appendChild(script)
}

function loadStyles(url) {
    var link = document.createElement('link')
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url
    document.getElementsByTagName('head')[0].appendChild(link)
}

function loadJS(url, success) {
    var domScript = document.createElement('script')
    domScript.src = url
    success = success || function () {
        }
    domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
            success()
            this.onload = this.onreadystatechange = null
            this.parentNode.removeChild(this)
        }
    }
    document.getElementsByTagName('head')[0].appendChild(domScript)
}

// 根据名字获取js文件的路径，用于加载引用的js文件
function getJSPathbyName(jsname) {
    var js = document.scripts
    var jsPath
    for (var i = js.length; i > 0; i--) {
        var index = js[i - 1].src.lastIndexOf('\/')
        var strname = js[i - 1].src.substring(index + 1, js[i - 1].src.length)
        if (strname == jsname) {
            jsPath = js[i - 1].src.substring(0, js[i - 1].src.lastIndexOf('/') + 1)
        }
    }
    return jsPath
}

// 事件回调函数
function popSmallToolTip(dic_values, point) {
    var htmlContent = "<div style='height:16px;'><p style='font-family:serif;font-size:14px;color:white;font-weight:bold;margin-top:1px;'>" + dic_values['NAME'] + '</p></div>'
    PopUp_ToolTip.show(point, htmlContent)
}

function popBigToolTip(dic_values, point) {
    var htmlContent = "<div style='width:150px;height:62px;margin-right:-8px;margin-left:-7px;margin-top:-3px;margin-bottom:-4px;'><div style='font-family:serif;font-size:12px;color:white;font-weight:bold;background:#C1914E;height:29px;line-height:29px;text-align:center'>" + dic_values['NAME'] + "</div><div style='background:#FFFFFF;height:32px;line-height:32px;'><div style='float:left;'>" + '名称' + "：</div><div style='color:red;'>" + dic_values['NAME'] + '</div></div></div>';
    PopUp_ToolTip2.show(point, htmlContent)
}

function hidePop()
{
    PopUp_big.hide();
}


function popWindow(dic_values, point) {
    // 支持连续点击图上的点
    PopUp_big.hide()
    console.log(dic_values)
    // dic_values['problem'] = dic_values['problem'] ? dic_values['problem'] : '';
    // dic_values['construction_target_task'] = dic_values['construction_target_task'] ? dic_values['construction_target_task'] : '';
    // dic_values['city_leader'] = dic_values['city_leader'] ? dic_values['city_leader'] : '';
    for (var key in dic_values) {
        if (dic_values[key] == 0) {
            continue
        }
        dic_values[key] = dic_values[key] ? dic_values[key] : ''
    }
    var htmls = "<div class='modal' style='margin-right:-4px;margin-left:-4px;margin-top:-6px;margin-bottom:-1px;'>"
    htmls += "<div class='modal-content'>"
    htmls += '    <ul>';
    htmls += '        <li>';
    htmls += '            <span>项目名称 :</span>';
    htmls += '            <span>' + dic_values['project_name'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>项目年度 :</span>';
    htmls += '            <span>' + dic_values['project_year'] + '年</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>当前建设进度目标任务 :</span>';
    htmls += '            <span>' + dic_values['construction_target_task'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>当前状态 :</span>';
    htmls += '            <span>' + dic_values['project_status'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>存在困难和问题 :</span>';
    htmls += '            <span>' + dic_values['problem'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>责任单位 :</span>';
    htmls += '            <span>' + dic_values['responsible_unit'] + '</span>';
    htmls += "            <button type='button' class='modal-supervise'><a href='/#/supervision/create'>督办</a></button>"
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>分管市领导 :</span>';
    htmls += '            <span>' + dic_values['city_leader'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>建设单位 :</span>';
    htmls += '            <span>' + dic_values['construction_unit'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>项目月调度信息 :</span>';
    htmls += "            <button type='button'><a href='/#/dispatchInfo'>详情</a></button>"
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>项目推进信息 :</span>';
    htmls += "            <button type='button'><a href='/#/advanceInfo'>详情</a></button>"
    htmls += "            <img src='../gis/img/modal-camera.svg' class='modal-camera' />"
    htmls += '        </li>';
    htmls += '    </ul>';
    htmls += "    <img src='../gis/img/yingxiang.png' class='modal-img' />"
    // htmls += "    <div class='modal-supervise-container'>";
    // htmls += "      <button type='button' class='modal-supervise'><a href='/#/supervise'>督办</a></button>";
    // htmls += "    </div>";
    htmls += '</div>';
    htmls += '</div>';
    var htmlContent = "<p style='font-family:Microsoft YaHei;font-size:14px;color:white;font-weight:bold;margin-top:4px;margin-bottom:-3px;width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>" + dic_values['project_name'] + '</p>' + htmls
    PopUp_big.show(point, htmlContent)
    return;
}


function popInfo(dic_values, point) {
    // 支持连续点击图上的点
    PopUp_big.hide()
    console.log(dic_values)

    for (var key in dic_values) {
        if (dic_values[key] == 0) {
            continue
        }
        dic_values[key] = dic_values[key] ? dic_values[key] : ''
    }

    var htmls = "<div class='modal' style='margin-right:-4px;margin-left:-4px;margin-top:-6px;margin-bottom:-1px;'>"
    htmls += "<div class='modal-content'>"
    htmls += '    <ul>';
    htmls += '        <li>';
    htmls += '            <span>项目编号 :</span>';
    htmls += '            <span>' + dic_values['projectNum'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>起始年限 :</span>';
    htmls += '            <span>' + dic_values['projectStartTime'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>结束年限 :</span>';
    htmls += '            <span>' + dic_values['projectEndTime'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>建设类别 :</span>';
    htmls += '            <span>' + dic_values['buildType'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>计划总投资 :</span>';
    htmls += '            <span>' + dic_values['plannedInvestNum'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>项目状态 :</span>';
    htmls += '            <span>' + dic_values['projectStatus'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>项目进度 :</span>';
    htmls += '            <span>' + dic_values['projectSchedule'] + '%</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>责任单位 :</span>';
    htmls += '            <span>' + dic_values['projectUnit'] + '</span>';
    htmls += '        </li>';
    htmls += '        <li>';
    htmls += '            <span>牵头领导 :</span>';
    htmls += '            <span>' + dic_values['responseLeader'] + '</span>';
    htmls += '        </li>';
    htmls += '    </ul>';
    htmls += '</div>';
    htmls += '</div>';
    var htmlContent = "<p class='modal-out-title'>" + dic_values['projectName'] + '</p>' + htmls
    PopUp_big.show(point, htmlContent)
    return;
}


var ZGMap = function (mapdiv) {
    mapContainer = mapdiv
    var divmapContainer = document.getElementById(mapdiv)
    divmapContainer.style.cssText = 'width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;';
    /* 添加住地图div显示位置*/
    var divmap = document.createElement('div')
    divmap.setAttribute('id', 'map')
    divmap.className = 'map'
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div')
    divMouseOut.setAttribute('id', 'mouse-position')
    divMouseOut.className = 'mouse-position-wrapper'
    var divMouse = document.createElement('div')
    divMouse.className = 'custom-mouse-position'
    divMouseOut.appendChild(divMouse)
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div')
    divscale.setAttribute('id', 'scale-line')
    divmapContainer.appendChild(divmap)//mapContainer加载map
    divmap.appendChild(divMouseOut)//加载坐标显示位置
    divmap.appendChild(divscale)//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/ol.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/ol-ext.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/CusControls/ol3-layerswitcher.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/framework.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/CusControls/CusControls.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/Module/Module.css')

//异步顺序加载js文件
    $LAB.script(getJSPathbyName('ZGMapApi.js') + 'js/tools/jquery.min.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/ol/ol.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/ol/ol-ext.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/CusControls/ol3-layerswitcher.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/CusControls/MapSwitch.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/layers/layers.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'gis.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerRenderer/LayerRenderer.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerRenderer/StyleConfig.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerManager/LayerManager.js')
        .wait(function () {
            var layerRenderer = new LayerRenderer()
            var layerManager = new LayerManager()
            layerManager.addPolygonLayer('行政区', 'http://172.19.18.223:5556/rdbmsserver?table=region',
                layerRenderer.GetStyleFunction('行政区'))

            layerManager.addClusterLayer('项目状态', 'http://172.19.18.223:5556/rdbmsserver?table=gap_project_view&whereclause=length(project_status)>1',
                layerRenderer.GetStyleFunction('项目状态'))

            layerManager.addClusterLayer('项目进度', 'http://172.19.18.223:5556/rdbmsserver?table=gap_project_view&whereclause=length(order_condition)>1',
                layerRenderer.GetStyleFunction('项目进度'))

            getLayerByTitle('项目状态原始').setVisible(false)
            getLayerByTitle('项目状态聚合').setVisible(false)
            //绑定xzq的鼠标移动事件,默认移动是显示为蓝色.
            addMapHoverEvent({layerTitle: '行政区'})
            //点击弹框
            addMapClickEvent({layerTitle: '项目状态原始', callbackFunction: popWindow})
            addMapClickEvent({layerTitle: '项目进度原始', callbackFunction: popWindow})
            addMapClickEvent({layerTitle: '项目状态聚合', callbackFunction: popWindow})
            addMapClickEvent({layerTitle: '项目进度聚合', callbackFunction: popWindow})
            //移动到点的时候鼠标变成手型
            addMapHoverEvent({layerTitle: '项目状态原始', style: 'old'})
            addMapHoverEvent({layerTitle: '项目进度原始', style: 'old'})
            addMapHoverEvent({layerTitle: '项目状态聚合', style: 'old'})
            addMapHoverEvent({layerTitle: '项目进度聚合', style: 'old'})
        })
    /* .script(getJSPathbyName("ZGMapApi.js") + "Component/Heatmap/Heatmap.js")
     .wait(function () {
     $.getJSON("http://172.19.18.223:5555/rdbmsserver?table=lygpoi&whereclause=ZHONGLEI='学校'", function (result) {
     var geojson = result;
     var listpt=[];
     if (geojson.features != null) {
     for (var i = 0; i < geojson.features.length; i++) {
     listpt.push({x:geojson.features[i].geometry.coordinates[0],y:geojson.features[i].geometry.coordinates[1]});
     }
     var myHeatmap = new Heatmap(listpt);
     //myHeatmap.showHeatmap();
     }
     });
     });*/

    // 暴露自定义组件加载方法，针对不用立即执行的功能,显示柱状图渲染
    this.showProgressBar = function () {
        $LAB.script(getJSPathbyName('ZGMapApi.js') + 'Component/ProgressBar/ProgressBar.js')
            .wait(function () {
                var progress = new ProgressBar([{x: 118.4, y: 34.8, percentage: 69}, {
                    x: 118.3,
                    y: 34.3,
                    percentage: 32
                }, {x: 119.3, y: 34.3, percentage: 36}])
                progress.showProgress()
            })
    };
}

function map_click_function(dic_values, point) {
    console.info(dic_values)
    var aside = document.getElementById('aside')
    aside.style.display = 'block'
}

var ZGMap2 = function (mapdiv) {
    mapContainer = mapdiv
    var divmapContainer = document.getElementById(mapdiv)
    divmapContainer.style.cssText = 'width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;';
    /* 添加住地图div显示位置*/
    var divmap = document.createElement('div')
    divmap.setAttribute('id', 'map')
    divmap.className = 'map'
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div')
    divMouseOut.setAttribute('id', 'mouse-position')
    divMouseOut.className = 'mouse-position-wrapper'
    var divMouse = document.createElement('div')
    divMouse.className = 'custom-mouse-position'
    divMouseOut.appendChild(divMouse)
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div')
    divscale.setAttribute('id', 'scale-line')
    divmapContainer.appendChild(divmap)//mapContainer加载map
    divmap.appendChild(divMouseOut)//加载坐标显示位置
    divmap.appendChild(divscale)//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/ol.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/ol-ext.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/CusControls/ol3-layerswitcher.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/ol/framework.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/CusControls/CusControls.css')
    loadStyles(getJSPathbyName('ZGMapApi.js') + 'css/Module/Module.css')

//异步顺序加载js文件
    $LAB.script(getJSPathbyName('ZGMapApi.js') + 'js/tools/jquery.min.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/ol/ol.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/ol/ol-ext.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/CusControls/ol3-layerswitcher.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/CusControls/MapSwitch.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'js/layers/layers.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'gis.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerRenderer/LayerRenderer.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerRenderer/StyleConfig.js').wait()
        .script(getJSPathbyName('ZGMapApi.js') + 'Component/LayerManager/LayerManager.js')
        .wait(function () {
            var layerRenderer = new LayerRenderer()
            var layerManager = new LayerManager()

            layerManager.addPolygonLayer('行政区2', 'http://172.19.18.223:5556/rdbmsserver?table=region',
                layerRenderer.GetStyleFunction('行政区2'))

            layerManager.addPointLayer('地区生产总值', "http://172.19.18.223:5556/rdbmsserver?table=gap_important&whereclause=type='dqsczz'",
                layerRenderer.GetStyleFunction('important_index'))


            layerManager.addPointLayer('实际利用外资', "http://172.19.18.223:5556/rdbmsserver?table=gap_important&whereclause=type='sjlywz'",
                layerRenderer.GetStyleFunction('important_index'))

            layerManager.addPointLayer('公共预算收入', "http://172.19.18.223:5556/rdbmsserver?table=gap_important&whereclause=type='ggyssr'",
                layerRenderer.GetStyleFunction('important_index'))

            layerManager.addPointLayer('固定资产投资', "http://172.19.18.223:5556/rdbmsserver?table=gap_important&whereclause=type='gdzctz'",
                layerRenderer.GetStyleFunction('important_index'))

            getLayerByTitle('地区生产总值').setVisible(true)
            getLayerByTitle('实际利用外资').setVisible(false)
            getLayerByTitle('公共预算收入').setVisible(false)
            getLayerByTitle('固定资产投资').setVisible(false)

            //点击弹框
            addMapClickEvent({layerTitle: '地区生产总值', callbackFunction: map_click_function})
            addMapClickEvent({layerTitle: '实际利用外资', callbackFunction: map_click_function})
            addMapClickEvent({layerTitle: '公共预算收入', callbackFunction: map_click_function})
            addMapClickEvent({layerTitle: '固定资产投资', callbackFunction: map_click_function})
            //移动到点的时候鼠标变成手型
            addMapHoverEvent({layerTitle: '地区生产总值', style: 'old'})
            addMapHoverEvent({layerTitle: '实际利用外资', style: 'old'})
            addMapHoverEvent({layerTitle: '公共预算收入', style: 'old'})
            addMapHoverEvent({layerTitle: '固定资产投资', style: 'old'})
            //绑定xzq的鼠标移动事件,默认移动显示为蓝色.
            addMapHoverEvent({layerTitle: '行政区2', style: layerRenderer.GetStyleFunction('行政区3')})
        })
}

var ZGMap3 = function (mapdiv) {
    mapContainer = mapdiv;
    var divmapContainer = document.getElementById(mapdiv);
    divmapContainer.style.cssText = "width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;";
    /*添加住地图div显示位置*/
    var divmap = document.createElement('div');
    divmap.setAttribute("id", "map");
    divmap.className = 'map';
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div');
    divMouseOut.setAttribute("id", "mouse-position");
    divMouseOut.className = 'mouse-position-wrapper';
    var divMouse = document.createElement("div");
    divMouse.className = 'custom-mouse-position';
    divMouseOut.appendChild(divMouse);
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div');
    divscale.setAttribute("id", "scale-line");
    divmapContainer.appendChild(divmap);//mapContainer加载map
    divmap.appendChild(divMouseOut);//加载坐标显示位置
    divmap.appendChild(divscale);//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol-ext.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/ol3-layerswitcher.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/framework.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/CusControls.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/Module/Module.css");

//异步顺序加载js文件
    $LAB.setOptions({AllowDuplicates: true})
        .script(getJSPathbyName("ZGMapApi.js") + "js/tools/jquery.min.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol-ext.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/ol3-layerswitcher.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/MapSwitch.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/layers/layers.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "gis.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "Component/StyleFun/ZGStyle.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "Component/LayerManager/LayerManager.js")
        .wait(function () {

            ZoomToPositon(119.22, 34.41, 9);

            var layerManager = new LayerManager();

            var jsonBoundray = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0, 0, 255, 0)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(232, 237, 241, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
            layerManager.addPolygonLayer("边界", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_20181018173358447f0753a", getStylebyJson(jsonBoundray));

            var jsonXZQ = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"Name","DiplayField":"Name","ClassList":[{"value":1,"label":"类别1","FilterString":"=,东海县","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(185, 217, 255, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}},{"value":2,"label":"类别2","FilterString":"=,赣榆区","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(219, 236, 254, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}},{"value":3,"label":"类别3","FilterString":"=,连云区","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(165, 201, 248, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}},{"value":4,"label":"类别4","FilterString":"=,海州区","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":0,"LineDash":[]},"Fill":{"Color":"rgba(201, 225, 251, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}},{"value":5,"label":"类别5","FilterString":"=,灌云县","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(201, 225, 251, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}},{"value":6,"label":"类别6","FilterString":"=,灌南县","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 1)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(219, 236, 254, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 15px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
            layerManager.addPolygonLayer("行政区", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_2018101817294394158be92", getStylebyJson(jsonXZQ))
            //addMapHoverEvent({ layerTitle: "行政区", style: 'old' })

        })

}


function regionClick(dic_values, point) {

    console.log(dic_values.Name);

}

function regionHover(dic_values, point) {

    alert(dic_values.Name);
    console.log(dic_values.Name);
}

function rollout()
{
    //alert("移出");
}

var ZGMaptype = function (mapdiv) {
    mapContainer = mapdiv;
    var divmapContainer = document.getElementById(mapdiv);
    divmapContainer.style.cssText = "width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;";
    /*添加住地图div显示位置*/
    var divmap = document.createElement('div');
    divmap.setAttribute("id", "map");
    divmap.className = 'map';
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div');
    divMouseOut.setAttribute("id", "mouse-position");
    divMouseOut.className = 'mouse-position-wrapper';
    var divMouse = document.createElement("div");
    divMouse.className = 'custom-mouse-position';
    divMouseOut.appendChild(divMouse);
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div');
    divscale.setAttribute("id", "scale-line");
    divmapContainer.appendChild(divmap);//mapContainer加载map
    divmap.appendChild(divMouseOut);//加载坐标显示位置
    divmap.appendChild(divscale);//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol-ext.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/ol3-layerswitcher.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/framework.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/CusControls.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/Module/Module.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "Component/histogram/histogram.css");

//异步顺序加载js文件
    var myPromise = new Promise((resolve, reject) => {
            $LAB.setOptions({AllowDuplicates: true})
            .script(getJSPathbyName("ZGMapApi.js") + "js/tools/jquery.min.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol-ext.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/ol3-layerswitcher.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/MapSwitch.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/layers/layers.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "gis.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "Component/StyleFun/ZGStyle.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "Component/LayerManager/LayerManager.js")
            .script(getJSPathbyName("ZGMapApi.js") + "Component/histogram/histogram.js")
            .wait(function () {
                console.log('111')
                resolve()

                ZoomToPositon(119.22, 34.41, 9);

                var layerManager = new LayerManager();

                var jsonBoundray = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(164, 164, 164, 0)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(83, 110, 126, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("边界", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_20181018173358447f0753a", getStylebyJson(jsonBoundray));

                var jsonXZQ = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"","DiplayField":"Name","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0, 107, 174, 1)","Width":2,"LineDash":[]},"Fill":{"Color":"rgba(14, 52, 111, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0, 107, 174, 1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":3,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("行政区", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_2018101817294394158be92", getStylebyJson(jsonXZQ))
                addMapHoverEvent({layerTitle: "行政区", style: null, callbackFunction: _this._regionHover,callbackFunctionOut:rollout})
                addMapClickEvent({ layerTitle: "行政区", callbackFunction: _this.regionClick})

                var jsonBJX = JSON.parse('{"StyleId":"","StyleName":"默认线样式","StyleType":"polyline","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0, 255, 255, 1)","Width":3,"LineDash":[]},"Fill":{"Color":"rgba(0,0,0,0.2)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("边界线", "http://172.19.18.223:5556/rdbmsserver?table=Polyline_20181018185235826ec3f85", getStylebyJson(jsonBJX));
            })
    })
    var _this = this;
    this.on = function(eventName, callBack) {
        if (eventName == 'click') {
            _this.regionClick = callBack
        }
        if (eventName == 'hover') {
            _this._regionHover = callBack
        }
    }

    this.InitHistogram = function (data) {
        myPromise.then(() => {
            DelOverlay();
        for (var i = 0; i < data.length; i++) {
            InitProgres(data[i].x, data[i].y, data[i].percent, "");
        }

    })


    }


}


var ZGMapdashboard = function (mapdiv) {
    mapContainer = mapdiv;
    var divmapContainer = document.getElementById(mapdiv);
    divmapContainer.style.cssText = "width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;";
    /*添加住地图div显示位置*/
    var divmap = document.createElement('div');
    divmap.setAttribute("id", "map");
    divmap.className = 'map';
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div');
    divMouseOut.setAttribute("id", "mouse-position");
    divMouseOut.className = 'mouse-position-wrapper';
    var divMouse = document.createElement("div");
    divMouse.className = 'custom-mouse-position';
    divMouseOut.appendChild(divMouse);
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div');
    divscale.setAttribute("id", "scale-line");
    divmapContainer.appendChild(divmap);//mapContainer加载map
    divmap.appendChild(divMouseOut);//加载坐标显示位置
    divmap.appendChild(divscale);//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol-ext.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/ol3-layerswitcher.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/framework.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/CusControls.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/Module/Module.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "Component/histogram/histogram.css");

//异步顺序加载js文件

    var myPromise = new Promise((resolve, reject) => {
            $LAB.setOptions({AllowDuplicates: true})
            .script(getJSPathbyName("ZGMapApi.js") + "js/tools/jquery.min.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol-ext.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/ol3-layerswitcher.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/MapSwitch.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "js/layers/layers.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "gis.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "Component/StyleFun/ZGStyle.js").wait()
            .script(getJSPathbyName("ZGMapApi.js") + "Component/LayerManager/LayerManager.js")
            .script(getJSPathbyName("ZGMapApi.js") + "Component/histogram/histogram.js")
            .wait(function () {
                console.log('111')
                resolve()

                ZoomToPositon(119.22, 34.41, 9);

                var layerManager = new LayerManager();

                var jsonBoundray = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(164, 164, 164, 0)","Width":1,"LineDash":[]},"Fill":{"Color":"rgba(83, 110, 126, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("边界", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_20181018173358447f0753a", getStylebyJson(jsonBoundray));

                var jsonXZQ = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"","DiplayField":"Name","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0, 107, 174, 1)","Width":2,"LineDash":[]},"Fill":{"Color":"rgba(14, 52, 111, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0, 107, 174, 1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":3,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("行政区", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_2018101817294394158be92", getStylebyJson(jsonXZQ))
                //addMapHoverEvent({ layerTitle: "行政区", style: null })
                //addMapClickEvent({ layerTitle: "行政区", callbackFunction: popWindow})

                var jsonBJX = JSON.parse('{"StyleId":"","StyleName":"默认线样式","StyleType":"polyline","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0, 255, 255, 1)","Width":3,"LineDash":[]},"Fill":{"Color":"rgba(0,0,0,0.2)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
                layerManager.addPolygonLayer("边界线", "http://172.19.18.223:5556/rdbmsserver?table=Polyline_20181018185235826ec3f85", getStylebyJson(jsonBJX));

            })
})

    this.InitHistogram = function (data) {
        myPromise.then(() => {
            DelOverlay();
        for (var i = 0; i < data.length; i++) {
            InitProgres(data[i].x, data[i].y, data[i].percent, "");
        }

    })


    }

}


var ZGMaparea = function (mapdiv,regionName,typeName) {
    mapContainer = mapdiv;
    var divmapContainer = document.getElementById(mapdiv);
    divmapContainer.style.cssText = "width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden;";
    /*添加住地图div显示位置*/
    var divmap = document.createElement('div');
    divmap.setAttribute("id", "map");
    divmap.className = 'map';
    /*添加坐标显示位置*/
    var divMouseOut = document.createElement('div');
    divMouseOut.setAttribute("id", "mouse-position");
    divMouseOut.className = 'mouse-position-wrapper';
    var divMouse = document.createElement("div");
    divMouse.className = 'custom-mouse-position';
    divMouseOut.appendChild(divMouse);
    /*添加比例尺显示位置*/
    var divscale = document.createElement('div');
    divscale.setAttribute("id", "scale-line");
    divmapContainer.appendChild(divmap);//mapContainer加载map
    divmap.appendChild(divMouseOut);//加载坐标显示位置
    divmap.appendChild(divscale);//加载比例尺显示位置

//加载css样式
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/ol-ext.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/ol3-layerswitcher.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/ol/framework.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/CusControls/CusControls.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/Module/Module.css");
    loadStyles(getJSPathbyName("ZGMapApi.js") + "css/modal.css");

//异步顺序加载js文件
    var myPromise = new Promise((resolve, reject) => {
    $LAB.setOptions({AllowDuplicates: true})
        .script(getJSPathbyName("ZGMapApi.js") + "js/tools/jquery.min.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/ol/ol-ext.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/ol3-layerswitcher.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/CusControls/MapSwitch.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "js/layers/layers.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "gis.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "Component/StyleFun/ZGStyle.js").wait()
        .script(getJSPathbyName("ZGMapApi.js") + "Component/LayerManager/LayerManager.js")
        .wait(function () {
            resolve()

            var QXName = regionName;

            switch (QXName) {
                case "赣榆区":
                    ZoomToPositon(119.11, 34.68, 10);
                    break;
                case "连云区":
                    ZoomToPositon(119.58, 34.49, 10);
                    break;
                case "海州区":
                    ZoomToPositon(119.26, 34.42, 10);
                    break;
                case "东海县":
                    ZoomToPositon(118.62, 34.40, 10);
                    break;
                case "灌云县":
                    ZoomToPositon(119.51, 34.23, 10);
                    break;
                case "灌南县":
                    ZoomToPositon(119.48, 34.04, 10);
                    break;
                default:
                    return;

            }

            var layerManager = new LayerManager();

            var jsonBoundray = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"Name","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":"=,赣榆区","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"Fill":{"Color":"rgba(91, 119, 133, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
            jsonBoundray.LevelList[0].ClassList[0].FilterString = "=," + QXName;
            layerManager.addPolygonLayer("边界", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_20181022150921328662214", getStylebyJson(jsonBoundray));

            var jsonXZQ = JSON.parse('{"StyleId":"","StyleName":"默认面样式","StyleType":"polygon","LevelList":[{"Level":18,"RenderField":"Name","DiplayField":"Name","ClassList":[{"value":1,"label":"类别1","FilterString":"=,赣榆区","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(93, 208, 253, 1)","Width":3,"LineDash":[]},"Fill":{"Color":"rgba(25, 52, 107, 1)","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(93, 208, 253, 1)"},"Stroke":{"Color":"rgba(255, 255, 255, 0)","Width":0,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
            jsonXZQ.LevelList[0].ClassList[0].FilterString = "=," + QXName;
            layerManager.addPolygonLayer("行政区", "http://172.19.18.223:5556/rdbmsserver?table=Polygon_2018101817294394158be92", getStylebyJson(jsonXZQ))

            //根据QXName，加载不同区县重点项目
            var jsonProject = JSON.parse('{"StyleId":"","StyleName":"默认点样式","StyleType":"point","LevelList":[{"Level":18,"RenderField":"","DiplayField":"","ClassList":[{"value":1,"label":"类别1","FilterString":",","OLStyle":{"Icon":{"src":"","opacity":1,"scale":1},"Stroke":{"Color":"rgba(0,0,255,1)","Width":1,"LineDash":[]},"Fill":{"Color":"","imgsrc":"","img":{}},"Text":{"Font":"bold 16px 宋体","Fill":{"Color":"rgba(0,0,0,1)"},"Stroke":{"Color":"rgba(255,255,255,1)","Width":5,"LineDash":[]},"offsetX":0,"offsetY":20}}}]}]}');
            //layerManager.addPolygonLayer("重点项目", "http://172.19.18.223:5557/gisproxy/rdbmsserver?table=Point_201810231704103519ab7c6", getStylebyJson(jsonProject))
            layerManager.addPolygonLayer("重点项目", "/gapDashboard/getGisAreaProjectInfo?areaName="+ QXName +"&typeName=" + typeName, getStylebyJson(jsonProject))
            addMapHoverEvent({layerTitle: "重点项目", style: null, callbackFunction:popInfo,callbackFunctionOut:hidePop});

        })

})

    this.SwitchRegion = function (regionName) {
        myPromise.then(() => {



    })


    }

}
